<template>
  <view>


    

    <view class="margin">
      <view class=""> </view>
      <view class="bg1 mt10 pd10">
        <h3>收件人信息</h3>
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <!-- :rules="rules" -->
        <u--form labelPosition="left" :model="form" ref="form1">
          <u-row>
            <u-col :span="12">
              <view class="demo-layout">
                <u-form-item
                  label="姓名"
                  prop="form.consignee"
                  borderBottom
                  ref="item1"
                >
                  <u--input v-model="form.consignee" border="none"></u--input>
                </u-form-item>
              </view>
            </u-col>
          </u-row>
          <u-row>
            <u-col :span="12">
              <view class="demo-layout">
                <view class="phone">
                  <u-form-item
                    label="手机号"
                    prop="form.phone"
                    borderBottom
                    ref="item1"
                  >
                    <u--input v-model="form.phone" border="none"></u--input>
                  </u-form-item>
                </view>
              </view>
            </u-col>
          </u-row>

          <u-row>
            <u-col>
              <view class="demo-layout">
                <view class="detailAddress">
                  <u-form-item
                    label="地址"
                    prop="form.address"
                    borderBottom
                    ref="item1"
                  >
                    <u--input v-model="form.address" border="none"></u--input>
                  </u-form-item>
                </view>
              </view>
            </u-col>
          </u-row>

          <u-row>
            <u-col>
              <view class="flexflex flex-align flex-end">
                <u-icon name="map" color="#7976e9"></u-icon>
                <view class="size_10" @click="getGps"> 定位 </view>
              </view>
            </u-col>

            <!-- 						<u-col :span="10">
							<view class="demo-layout bg-purple">
								<view class="area">
									<u-form-item label="省市区" prop="userInfo.name" borderBottom ref="item1">
										<u--input v-model="model1.userInfo.name" border="none"></u--input>
									</u-form-item>
								</view>
							</view>
						</u-col> -->
          </u-row>
        </u--form>
      </view>

      <!--  -->
      <view class="bg2 mt10">
        <view class="">
          <view class="pd10">
            <view class="flex ms17">
              <h3 class="size_16">智能填写</h3>
              <view v-if="false" class="size_14"> 识别 </view>
            </view>
            <!-- 							<u--textarea disabled placeholder="粘贴地址信息，可自动识别并填写" v-model="model1.intro" count>
						</u--textarea> -->
            <view class="bg_f9">
              <auto-parse-address
                boxClass="c-box"
                @result="result"
              ></auto-parse-address>
            </view>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="" style="margin-top: 200rpx">
        <view class="btn flex-cen" @click="saveAddress">
          <!-- @click="$pub.go('/pages/addAddress/addAddress')" -->
          <view class="size_16 color_white"> 保存 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      change: 0,
      /* new */
      form: {
        address: "",
        consignee: "",
        phone: "",
      },
      rules: {
        "form.consignee": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "form.phone": {
          type: "string",
          required: true,
          message: "请填写手机",
          trigger: ["blur", "change"],
        },
        "form.address": {
          type: "string",
          required: true,
          message: "请填写地址",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    // this.$refs.form1.setRules(this.rules)
  },
  onLoad(options) {
    if (options.data) {
      let data = JSON.parse(decodeURIComponent(options.data));
      if (data) {
        this.form = data;
      }
      let change = options.change;

      this.change = change;
      console.log(data, "data");
      console.log(change, "change");
    }
  },
  onShow() {},
  methods: {
    async saveAddress() {
      if (this.change == 1) {
        console.log("修改");
        let re = await this.$API.addressApi.changeList(this.form);
        uni.showToast({
          title: "修改成功",
        });
        uni.navigateBack();
        return;
      }

      let re = await this.$API.addressApi.addList(this.form);
      console.log(re, "data");
      uni.showToast({
        title: "添加成功",
      });
      uni.navigateBack();
    },
    result(e) {
      /* 
				 王路13077274575北京市朝阳区xx路姚家园x楼x单元3305上官飞雪15000000000
				 "address": "",
				 "consignee": "",
				 "phone": ""
				 */
      console.log(e);
      let { name, phone, detail } = e;
      this.form.consignee = name;
      this.form.phone = phone;
      this.form.address = detail;
      /**
       * @params e: { province: '', name: '', city: '', area: '', detail: '', phone: '', postalCode: '' }
       *
       * */
    },
    getGps(e) {
      let that = this;
      console.log(111, "locations");
      uni.getSystemInfo({
        success(res) {
          console.log("判断手机定位服务是否授权:", res);
          let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
          if (locationEnabled == false) {
            //手机定位服务（GPS）未授权
            uni.showToast({
              title: "请打开手机GPS",
              icon: "none",
            });
          } else {
            uni.chooseLocation({
              success: function (res) {
                console.log("位置名称：" + res.name);
                // this.dizhi = res.name
                // that.activityInfo.uaddress = res.address
                // that.activityInfo.ulatitude = res.latitude
                // that.activityInfo.ulongitude = res.longitude
                that.form.address = res.address;
                console.log("详细地址：" + res.address);
                console.log("纬度：" + res.latitude);
                console.log("经度：" + res.longitude);
              },
            });
          }
        },
      });
    },

    sexSelect(e) {
      this.model1.userInfo.sex = e.name;
      this.$refs.form1.validateField("userInfo.sex");
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9ff;
}

.demo-layout {
  // height: 86rpx;
}

/* 深度选择器 */

.demo-layout .phone ::v-deep.u-form-item__body__left {
  width: 130rpx !important;
}

.demo-layout .area ::v-deep.u-form-item__body__left {
  width: 130rpx !important;
}

.demo-layout .detailAddress ::v-deep.u-form-item__body__left {
  width: 130rpx !important;
}

/* bg */
.bg1 {
  // width: 690rpx;
  height: 378rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 1;
}

.bg2 {
  // width: 690rpx;
  height: 432rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 1;
}

/* 按钮 */
.btn {
  // width: 690rpx;
  height: 104rpx;
  background: #7976e9;
  border-radius: 52rpx 52rpx 52rpx 52rpx;
  opacity: 1;
}
</style>